<template>
    <view class="refund-info-container">
        <view class="refund-row">
            <view class="refund-label">
                退款数量
            </view>
            <view class="refund-value">
                {{ formData.ebMerActivityTicketNumOk }}
            </view>
        </view>
        <u-divider />
        <view class="refund-row">
            <view class="refund-label">
                <p class="refund-label-text">退款金额</p>
                <p class="refund-note">1-3个工作日退还至原支付方，以实际金额为准</p>
            </view>
            <view class="refund-value refund-bold">
                ￥{{ formData.ebMerActivityTicketPriceBack }}
            </view>
        </view>
        <u-divider />
        <view class="refund-row">
            <view style="display: flex;flex-direction: initial;" class="refund-label refund-required">
                退款原因
            </view>
            <view class="refund-value" @click="onReson" style="display: flex;">
                {{ resonData.dictLabel || '请选择' }}<u-icon name="arrow-right" />
            </view>
        </view>
        <u-divider />

        <changeReson @onSubReson="onSubReson" ref="changeReson" />
        <view class="refund-bottom">
            <view class="refund-note-container">
                退款金额<span class="refund-amount">{{ formData.ebMerActivityTicketPriceBack }}</span>
            </view>
            <u-button class="refund-submit-button" type="primary" :loading="subLoading" round
                @click="onSubmit">提交</u-button>
        </view>
    </view>
</template>

<script>
import changeReson from './change_reson.vue';
import { submitRequestRefund } from "../../../utils/api/local";
export default {
    components: {
        changeReson
    },
    props: {
        orderId: {
            type: String,
            default: ''
        },
        formData: {
            type: Object,
            default: () => ({
                ebMerName: ''
            })
        },
        idd: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            value: 1,
            textarea: '',
            resonData: {
                dictCode: '',
                dictLabel: ''
            },
            subLoading: false
        }
    },
    methods: {
        /** 打开退款原因页面 */
        onReson() {
            /** 
             * 若已有选中原因值，则传入相关数据
            */
            if (this.resonData.dictCode) {
                let reson = this.resonData.dictCode + '- -' + this.resonData.dictLabel;
                this.$refs.changeReson.handleOpen(reson);
            } else {
                this.$refs.changeReson.handleOpen();
            }
        },
        /** 获取原因选择值 */
        onSubReson(data) {
            this.resonData.dictCode = data.split('--')[0];
            this.resonData.dictLabel = data.split('--')[1];
        },

        /** 提交 */
        onSubmit() {
            if (!this.resonData.dictCode) {
                uni.showToast({
                    title: '请选择退款原因',
                    icon: 'none',
                })
                return false;
            }
            this.subLoading = true;
            submitRequestRefund({
                id: this.idd,
                /** 退款原因 */
                refundReasonWapType: this.resonData.dictCode,
                /** 退款原因 */
                text: this.resonData.dictLabel,
                /** 备注说明 */
                refund_reason_wap_explain: this.textarea,
                uni: this.orderId
            }).then((res) => {
                if (res.code==200) {
                    this.subLoading = false;
                uni.showToast({
                    title: '提交成功',
                    icon: 'none',
                })
                this.$emit('onSubmitGo');
                uni.reLaunch({
                    url: '/pages_h5/myCenter/components/local_life_order'
                });
                } else {
                    this.subLoading = false;
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                    })
                }
            }).catch((err) => {
                this.subLoading = false;
                uni.showToast({
                    title: '请求失败'+err.message,
                    icon: 'none',
                })
            });
        }
    }
}
</script>

<style lang="less" scoped>
.refund-info-container {
    padding: 20rpx;
}

.refund-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}

.refund-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.refund-label-text {
    font-size: 32rpx;
    color: #333;
}

.refund-note {
    font-size: 24rpx;
    color: #999;
}

.refund-value {
    font-size: 32rpx;
    color: #333;
}

.refund-bold {
    font-weight: bold;
}

.refund-required::after {
    content: '*';
    color: #f00;
    margin-left: 10rpx;
}

.refund-section {
    margin-top: 20rpx;
}

.refund-bottom {
    position: fixed;
    bottom: 16rpx;
    left: 0;
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.refund-note-container {
    font-size: 28rpx;
    color: #999;
}

.refund-amount {
    font-size: 36rpx;
    color: #F86316;
    font-weight: bold;
}

.refund-submit-button {
    width: 50%;
}
</style>
